<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
  <link rel="stylesheet" href="../../styles/common.css" />
  <link rel="stylesheet" href="../../styles/page.css" />
</head>

<body>
  <div class="dashboard-container" id="department-app">
    <div class="container">
      <div class="tableBar">
        <el-input v-model.number="input" placeholder="请输入部门编号" style="width: 250px" clearable
          @keyup.enter.native="findDepartment">
          <i slot="prefix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="init"></i>
        </el-input>
        <div class="tableLab">
          <el-button type="primary" @click="openAddDepartment">
            + 新建部门
          </el-button>
        </div>
      </div>
      <el-table :data="tableData" stripe class="tableBox">
        <el-table-column label="部门编号" prop="id" width="150" align="center"></el-table-column>
        <el-table-column label="部门名称" prop="name"></el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" class="blueBug" @click="openEditDepartment(scope.row)">
              修改
            </el-button>
            <el-button type="text" size="small" class="delBut non" @click="deleteHandle(scope.row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination class="pageList" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
        @size-change="handleSizeChange" @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper" :total="counts" :current-page.sync="page"></el-pagination>
      <!-- 新增部门弹窗 -->
      <el-dialog :title="isEdit?'修改部门':'新增部门'" :visible.sync="dialogFormVisible" append-to-body>
        <el-form :model="form">
          <el-form-item label="部门编号" :label-width="formLabelWidth">
            <el-input v-model.number="form.id" autocomplete="off" :disabled="isEdit"></el-input>
          </el-form-item>
          <el-form-item label="部门名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="isEdit ? editDepartmentHandle() : addDepartmentHandle()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="../../plugins/vue/vue.js"></script>
  <!-- 引入组件库 -->
  <script src="../../plugins/element-ui/index.js"></script>
  <!-- 引入axios -->
  <script src="../../plugins/axios/axios.min.js"></script>
  <script src="../../js/request.js"></script>
  <script src="../../api/department.js"></script>
  <script>
    new Vue({
      el: '#department-app',
      data() {
        return {
          input: '',
          counts: 0,
          page: 1,
          pageSize: 10,
          tableData: [],
          dishState: '',
          checkList: [],
          dialogFormVisible: false,
          formLabelWidth: '120px',
          form: {
            id: '',
            name: ''
          },
          isEdit: false
        }
      },
      computed: {},
      created() {
        this.init()
      },
      mounted() {
      },
      methods: {
        async init() {
          const params = {
            page: this.page,
            pageSize: this.pageSize,
            name: this.input ? this.input : undefined
          }
          await getDepartmentPage(params).then(res => {
            if (String(res.code) === '1') {
              this.tableData = res.data.records || []
              this.counts = res.data.total
            }
          }).catch(err => {
            this.$message.error('请求出错了：' + err)
          })
        },
        getImage(image) {
          return `/common/download?name=${image}`
        },
        handleQuery() {
          this.page = 1;
          this.init();
        },
        // 
        handleSizeChange(val) {
          this.pageSize = val
          this.handleQuery()
        },
        // page 更改
        handleCurrentChange(val) {
          this.page = val
          this.init()
        },
        // 新增部门
        addDepartmentHandle() {
          if (this.form.id === '' || this.form.name === '') {
            this.$message.error('不能为空');
          } else {
            addDepartment({
              ...this.form
            }).then(async (response) => {
              if (response.code) {
                this.$message({
                  message: '新增部门成功',
                  type: 'success'
                });
                this.dialogFormVisible = false
                this.form = {
                  id: '',
                  name: ''
                }
                this.handleQuery()
              } else {
                this.$message.error('新增部门失败');
              }
            })
          }
        },
        // 查找部门
        async findDepartment() {
          let id = this.input
          if (id === '') {
            this.handleQuery()
          } else {
            await reqFindDepartment({ id }).then((res) => {
              if (res.code === 1) {
                if (res.data) {
                  this.tableData = [res.data]
                } else {
                  this.$message.error('未搜索到');
                }

              }
            })
          }
        },
        // 删除
        deleteHandle(id) {
          this.$confirm('确认删除该部门, 是否继续?', '确定删除', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            deleteDepartment({ id }).then((res) => {
              if (res.code === 1) {
                this.$message({
                  message: '删除部门成功',
                  type: 'success'
                });
                this.handleQuery()
              }
            })
          })
        },
        // 打开新增部门对话框
        openAddDepartment() {
          this.dialogFormVisible = true
          this.isEdit = false
          this.form = {
            id: "",
            name: ""
          }
        },
        // 打开修改部门对话框
        openEditDepartment({ id, name }) {
          this.isEdit = true
          this.dialogFormVisible = true
          this.form = { id, name }
        },
        // 修改部门
        editDepartmentHandle() {
          if (this.form.name === '') {
            this.$message.error('不能为空');
          } else {
            reqEditDepartment({ ...this.form }).then((res) => {
              if (res.code === 1) {
                this.$message({
                  message: '修改部门成功',
                  type: 'success'
                });
              } else {
                this.$message.error('修改部门失败');
              }
              this.dialogFormVisible = false
              this.form = {
                id: '',
                name: ''
              }
              this.isEdit = false
              this.handleQuery()
            }).catch((e) => {
              console.log(e)
            })
          }
        }
      }
    })
  </script>
</body>

</html>